{% extends 'front/user_base.html' %}
{% block css %}
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/pure-min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/create.css') }}">
    <style>
    .pure-form select.user-gender, .pure-form input#username{
        height: 3rem;
        padding: 0.2rem 0.6rem;
    }
    </style>
{% endblock %}
{% block content %}
    <div class="r_box">
        <div class="pure-g">
        {% for category, message in get_flashed_messages(with_categories=true) %}
            <div class="alert alert-{{ category }} alert-dismissable pure-u-1 pure-u-md-21-24">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            </div>
        {% endfor %}
        <form class="pure-form pure-form-aligned pure-u-1 pure-u-md-21-24" action="{{ url_for('main.user_profile') }}" method="post" onsubmit="return checkPost()">
            <fieldset>
                {{ form.csrf_token }}
                {{ form.user_id(class='pure-u-2-3', id="user_id") }}
                 <div class="pure-control-group ">
                     <label for="username" class="pure-u-1-3">头&emsp;&emsp;像</label>
                     <img src="{{ user.avatar_hash }}" alt="" style="display: inline-block;border-radius: 50%">
                </div>
                <div class="pure-control-group ">
                    <label for="username" class="pure-u-1-3">昵&emsp;&emsp;称</label>
                    {{ form.username(class='pure-u-2-3', id="username", placeholder="输入昵称", required='') }}
                </div>
                <div class="pure-control-group">
                    <label for="password" class="pure-u-1-3">性&emsp;&emsp;别</label>
                    {{ form.gender(class='pure-u-2-3 user-gender', id="gender") }}
                </div>
                <div class="pure-controls" style="text-align: right">
                    <button type="submit" class="button-success pure-button button-large pure-u-3-3" style="margin-right: 100px">
                        保存
                    </button>
                </div>
            </fieldset>
        </form>
    </div>
    </div>
{% endblock %}